<!-- <script setup></script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template> -->


<!-- demo4-1  CountCom
<template>
  <div>
    <!-- 以开放标签形式使用全局组件 -->
    <!-- <count-com></count-com>
    <!-以自闭合标签形式使用全局组件 -->
    <!-- <count-com/>
  </div>
</template> 
<script>
</script>
<style scoped>
</style> -->




<!-- demo4-2  NumberCom
<template>
  <div>
    <NumberCom/>
    <NumberCom/>
  </div>
</template>
<script>
//导入局部组件对象
import NumberCom from './components/NumberCom.vue'
export default {
  //注册局部组件
  components:{
    NumberCom
  },
};
</script> -->





<!-- demo4-3  Hellocom
<template>
  <div>
   <Hellocom name ="Jim"></Hellocom>
   <Hellocom name ="Lily"></Hellocom>
   <Hellocom name ="Bob"></Hellocom>
  </div>
</template>
<script>
//导入局部组件对象
import Hellocom from './components/Hellocom.vue';
export default {
  //注册局部组件
  components:{
    Hellocom
  },
};
</script>  -->


<!-- 
demo4-4   ActiveCom1,2
<template>
  <div>
   <input type="radio" v-model="activeComponent" value="ActiveCom1"/>ActiveCom1
   <input type="radio" v-model="activeComponent" value="ActiveCom2"/>ActiveCom2
    <component :is="activeComponent"></component>
  </div>
</template>
<script>
import ActiveCom1 from './components/ActiveCom1.vue';
import ActiveCom2 from './components/ActiveCom2.vue';
export default {
  data(){
    return{
      activeComponent:"ActiveCom2",
    };
  },
  components:{
    ActiveCom1,
    ActiveCom2,
  },
};
</script>   -->





<!-- demo4-5 HelloCom
<template>
  <div>
    <div>
      <!-- 异步等待容器 -->
      <!-- <Suspense>
        <template v-slot:default>
          <AsyncCom></AsyncCom>
        </template>
        <template v-slot:fallback>
          <h2>LOADING......</h2>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
// 定义一个异步组件AsyncCom
const AsyncCom = defineAsyncComponent(
  () => import('./components/HelloCom2.vue'))

export default {
  components: {
    AsyncCom
  }
}
</script>  --> 


demo4-6 MusicCom1
<!-- demo4-6 -->
<!-- <template>
  <div>
    <button @click="currentTab = 'Tab1'">音乐</button>
    <button @click="currentTab = 'Tab2'">视频</button>
    <button @click="currentTab = 'Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";
export default {
  data() {
    return {
      currentTab: "Tab1",
    };
  },
  components: {
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>

<style scoped>
</style> -->





<!-- demo4-7
 <template >
  <div>
  //这里传递了一个父组件的
    <ChildCom1msg="hello,i am dad"></ChildCom1msg=>
  </div>
 </template>
 <script>
import ChildCom from './components/ChildCom1.vue';
 export default {
  components:{
    ChildCom
  }
 }
 </script>
 <style lang="">
  
 </style> -->
  


 <!-- demo4-8 -->
  <!-- <template >
    <div>
      <ChildCom2 :name="name" :age="age"></ChildCom2>
    </div>
  </template>
  <script>
import ChildCom2 from './components/ChildCom2.vue';
  export default {
    data(){
      return{
        name:"Jim",
        age:[],
        gender:"",
        hobby:[]
      }
    },
    components:{
      ChildCom2
    }
  };
  </script>
  <style lang="">
    
  </style>
   -->
  


<!--Demo4-8-1-->
<!-- <template>
  <div>
    <ChildCom1 :name="name" :age="age" />
    <myCom1 :parentMsg="msg"></myCom1>
    <myCom2 :ChildWidth="width"></myCom2>
  </div>
</template>
<script>
import ChildCom1 from './components/ChildCom2.vue';
import myCom1 from './components/MyCom1.vue';
import myCom2 from './components/MyCom2.vue';

export default {
  data() {
    return {
      name:"Jim",//姓名
      age:[],//年龄
      gender:'',//性别
      hobby:[],//爱好
      width:400,
      msg:'父组件的msg'
    }
  },
  components:{
    ChildCom1,
    myCom1,
    myCom2
  }
};
</script>
<style scoped>
  
</style> -->


<!--Demo4-9-->
<!-- <template lang="">
  <div>
    <ChildCom3 @score ="scoreHandler"/>
  </div>
</template>
<script>
import ChildCom3 from './components/ChildCom3.vue';
export default {
  components:{
    ChildCom3
  },
  methods:{
    scoreHandler(arg1,arg2){
      console.log(arg1,arg2);
    }
  }
};
</script>
<style lang="">
  
</style> -->





<!--Demo4-10-->
<!-- <template>
  <div>
    <ChildCom4 ref="childRef"></ChildCom4>
    <button @click="sendMessage">Send Message To Child</button>
  </div>
</template>

<script>
import ChildCom4 from './components/ChildCom4.vue';

export default {
  components: { ChildCom4 },
  methods: {
    sendMessage() {
      this.$refs.childRef.receiveMessage('Hello from parent');
    }
  }
}
</script>

<style></style> -->





<!--Demo4-11-->
<!-- <template>
  <div> -->
     <!-- <ChildCom5 v-model="msg">{{msg}}</ChildCom5> -->
    <!-- <ChildCom5 v-model="msg"/>{{msg}}
  </div>
</template>
<script>
import ChildCom5 from './components/ChildCom5.vue';
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    ChildCom5
  }
}
</script>
<style>
  
</style> -->




<!--Demo4-11-->
<template>
  <div>
    <Childcom6></ChildCom6>
  </div>
</template>

<script>
import Childcom6 from './components/Childcom6.vue';

export default {
  components:{
    Childcom6
  },
  provide:{
    message:'Hello from parent'
  }
}
</script>

<style lang="">

</style>